<template>
  <view class="product-check" @click="click">
    <image v-if="checked&&!disable" src="~@/static/images/cart/icon_marquee_selected_n.png" mode="aspectFill"></image>
    <view v-else class="noChecked">
      <image v-if="disable" src="~@/static/images/cart/icon_marquee_n.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      checked: {
        type: Boolean,
        default: false
      },
      disable: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      click() {
        this.$emit("checkedClick")
      }
    }
  }
</script>

<style lang="scss" scoped>
  .noChecked {
    width: 36rpx;
    height: 36rpx;
    margin: 2rpx;
    background-color: white;
    border-radius: 36rpx;
    border: 1px solid #ccc;
  }
  .product-check{
    width: 40rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image{
      width: 33rpx;
      height: 33rpx;
      background-image: url("~@/static/images/cart/icon_marquee_n.png");
      background-size: 100% 100%;
    }
  }
</style>
